<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品价格分析预测系统</title>
            <link rel="stylesheet" href="../static/css/index.css" />
    <script src="{{ url_for('static', filename='js/echarts.js')}}"></script>
    <!-- 引入本地的 jQuery -->
    <script src="../static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/formcss.css') }}">

</head>
<body style="margin: 0;">
    <div style="border-top: 50px solid #428bca;"></div>
    <!-- 实时更新日期和时间 -->
    <div id="datetime" style="text-align: center; color: lightcyan; margin-top: -1.7%;margin-left: 5%;font-weight: bold;font-size:25px;"></div>
    <div style="text-align: center; color: white; font-size: 30px;margin-top: 30px;margin-left: 5%">价格对比雷达图</div>

    <script src="{{ url_for('static',filename='js/time.js')}}"></script>
    <script src="{{ url_for('static',filename='js/theme.js')}}"></script>
    <script src="{{ url_for('static',filename='js/echarts.min.js')}}"></script>
    <!-- 侧边栏 -->
    <div class="sidebar">
    <div style="position: relative; border-top: 50px solid #428bca;">
        <div style="position: absolute; top: -40px; left: 0px; right: 0; text-align: center; color: white; font-size: 25px;">数据可视化</div>
    </div>
    <a href="/index" style="display: block; text-align: center; ">数据总览</a>
    <a href="/chart" style="display: block; text-align: center; ">产品分析</a>
    <a href="/chart1" style="display: block; text-align: center; ">价格变化趋势折线图</a>
    <a href="/chart2" style="display: block; text-align: center; ">价格变化情况滚动表</a>
    <a href="/chart3" style="display: block; text-align: center; ">价格变化柱状图</a>
    <a href="/chart4" style="display: block; text-align: center; ">价格对比雷达图</a>
    <a href="/chart5" style="display: block; text-align: center; ">最低价变化饼图</a>
    <a href="/predict" style="display: block; text-align: center; ">未来7日价格预测</a>
    <a href="/products" style="display: block; text-align: center; ">产品管理(管理员)</a>
    <a href="/manage" style="display: block; text-align: center; ">用户管理(管理员)</a>
    <a href="/register" style="display: block; text-align: center; ">用户注册</a>
    <a href="/login" style="display: block; text-align: center; ">切换用户</a>
</div>

    <center>
 <!-- 地图模块 -->
        <div class="map" style="width:90%;height:800px;margin-left: 5%;">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart"></div>
        </div>

    <!-- 农产品查询表单 -->
    <div style="text-align: center; bottom: 20px;  margin-left: 5%">
        <form id="form" name="form" method='POST' action='/chart4' style="display: inline-block; text-align: left;">
            <h1 style="color: white;">请输入农产品名：
                <input type="text" name="product" placeholder="例：北方江米" style="height:50px;width:160px;font-size:25px;">
                <input type="submit" value="点击查询">
            </h1>
        </form>
    </div>

    </center>

    <script>
var myChart = echarts.init(document.querySelector('.chart'), 'theme');

        myChart.setOption({
            textStyle: {
                color: 'rgba(255, 255, 255, 1)'
            },

            legend: { top: '1%', orient: 'vertical', right: '1%', textStyle: { fontSize: 20, color: 'rgba(255, 255, 255, 1)' } },
          radar: [{
                indicator: {{dict_return['radar0']|tojson}},
                radius: 260,
                center: ['50%', '50%'],
                startAngle: 90,
                splitNumber: 8,
                shape: 'circle',
                name: { formatter: '【{value}】', textStyle: { color: '#428BD4' } },
                splitArea: { show: true, areaStyle: { color: ['#77EADF', '#26C3BE', '#64AFE9', '#26C3BE'], shadowColor: 'aqua', shadowBlur: 10 } },
                axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 1)' } },
                splitLine: { show: true, lineStyle: { width: 1, color: '#286fbb' } }
            }],

            dataZoom: [{ startValue: '2023-01-01' }, { type: 'inside' }],
            series: [
                { name: '商品1', type: 'radar', tooltip: { trigger: 'item' }, label: { normal: { show: true, position: '', rotate: 0 } }, areaStyle: { color: "#ff00ff" }, data: {{dict_return['radar1']|tojson}} },
                { name: '商品2', type: 'radar', tooltip: { trigger: 'item' }, label: { normal: { show: true, position: '', rotate: 0 } }, areaStyle: { color: 'rgba(255,218,54,0.92)' }, data: {{dict_return['radar2']|tojson}} },
                { name: '商品3', type: 'radar', tooltip: { trigger: 'item' }, areaStyle: { color: "#1b40db" }, label: { normal: { show: true, position: '', rotate: 0 } }, data: {{dict_return['radar3']|tojson}} },
            ]
        });
            window.addEventListener('resize', myChart.resize);
    </script>

</body>
</html>
